<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实战</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			header{
				height: 50px;
				display: flex;
				background-color: #7d7d7d;
			}
			header img{
				width: 10%;
			}
			header ul{
				list-style: none;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				width: 90%;
			}
			article{
				width: 90%;
				margin: 20px auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly
			}
			.item{
				padding: 10px;
				width: 230px;
				margin-bottom: 20px;
				border: 1px solid #666666;
				box-shadow: 5px 1px 1px #e5e5e5;
				flex-grow: 1;
				margin-right: 20px;
				transition: all 10s;
			}
			.item img{
				width: 100%;
			}
			.price{
				font-size: 18px;
				font-weight: bold;
				color: darkred;
			}
		</style>
	</head>
	<body>
		<header>
			<img src="logo.png" >
			<ul>
				<li>第一项哈哈哈</li>
				<li>第二项哈哈哈</li>
				<li>第三项哈哈哈</li>
				<li>第四项哈哈哈</li>
				<li>第五项哈哈哈</li>
				<li>第六项哈哈哈</li>
			</ul>
		</header>
		
		<article>
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
			
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
			
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
			
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
			
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
			
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
			
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
			
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
			
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
			
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
			
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
			
			<div class="item">
				<img src="shop.png" ><p>半透明彩色亚克力化妆品1</p><p class="price">￥998</p>
			</div>
		</article>
	</body>
</html>
